<template>
	<view class="all-box">
		<view class="message-box">
			<image class="message-icon" src="https://image.nanjingtouyang.com/touy/2024/07/15/0673d15dc89942f18946d8854d782bc3.png" mode=""></image>
			<view class="message-text">
				为了不影响您的服务，请设置您的工作时间，用户仅在设置时间内可预约您的服务！
			</view>
		</view>
		
		<view class="list-box">
			<view class="list-box-item" v-for="(item, index) in workList" :key="index">
				<view class="item-box">
					<view class="item-days">
						<view class="days-title">周排班</view>
						<view class="days-box" @click="toChooseWeek(item)">
							<!-- <view class="box-choose-none">请选择</view> -->
							<view class="box-choose-txts">{{ item.workWeekLabel }}</view>
							<image class="box-choose-icon" src="https://image.nanjingtouyang.com/touy/2024/07/15/76487092f2634dc7a15ee4f8c8650689.png" mode=""></image>
						</view>
					</view>
					<view class="item-days" style="margin-top: 38rpx;">
						<view class="days-title">时间段</view>
						<view class="add-time-box">
							<view v-for="(items, indexs) in item.spWorkTimeList" :key="indexs" class="add-time-none add-time-have">
								<view class="">{{ items.startTime }}～{{ items.endTime }}</view>
								<image @click="toDeleteTimes(items)" class="none-icon" src="https://image.nanjingtouyang.com/touy/2024/07/15/b8c2d89264b44a489abff7a64ae78da6.png" mode=""></image>
							</view>
							<view class="add-time-none" @click="toChooseTime(item)">
								<view class="">添加时间段</view>
								<image class="none-icon" src="https://image.nanjingtouyang.com/touy/2024/07/15/e1286389f0814c8fade9fd5dcd467873.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="item-delete" @click="deleteItem(item.workId)">
					<view class="delete-text" >删除排班</view>
					<image class="delete-icon" src="https://image.nanjingtouyang.com/touy/2024/07/15/b865ae5a33d648aa9e2c3fe01f7e78c7.png" ></image>
				</view>
			</view>
			
			<view  class="list-box-add" @click="addWork">
				<image class="add-image" src="https://image.nanjingtouyang.com/touy/2023/09/2023091510003922820.png"></image>
				<view class="add-text">添加排班</view>
			</view>
		</view>
		
		<!-- 选择周 -->
		<u-popup v-model="chooseWeekShow" mode="bottom" border-radius="30">
			<view class="choose-popup">
				<view class="choose-box-title">
					<image @click="closeWeek" class="close-icon" src="https://image.nanjingtouyang.com/touy/2024/07/16/ffd3aa00f5ab436386211e9c42b1d073.png" mode=""></image>
					<view class="title">选择周排班</view>
					<view class="confirm-icon" @click="confirmWeek">确认</view>
				</view>
				<view class="choose-type-box">
					<view v-for="(item, index) in weekList" :key="index" class="type-box-item">
						<view :class="item.choose == true ? 'item-box item-box-active' : 'item-box' " @click="chooseWeekItem(item, index)">{{ item.name }}</view>
					</view>
				</view>
				<view class="type-box-bottom"></view>
			</view>
		</u-popup>
		
		<!-- 选择时间 -->
		<u-picker 
			mode="multiSelector" 
			title="选择时间段" 
			v-model="chooseTimeShow"  
			:default-selector='[8, 9]' 
			:range="multiSelector"
			confirm-color="#8CC63F"
			@confirm="confirmTime">
		</u-picker>
		
		
		<!-- <u-popup  mode="bottom" border-radius="30">
			<view class="choose-popup" style="min-height: 800rpx;">
				<view class="choose-box-title">
					<image @click="closeWeek" class="close-icon" src="https://image.nanjingtouyang.com/touy/2024/07/16/ffd3aa00f5ab436386211e9c42b1d073.png" mode=""></image>
					<view class="title">选择时间段</view>
					<view class="confirm-icon" @click="confirmWeek">确认</view>
				</view>
				<view class="choose-type-box">
					<picker mode="multiSelector" :range="multiSelector" :value="selectIndex" @columnchange="changeItem">
						<view class="uni-input">hhhhhh</view>
					</picker>
					
				</view>
				<view class="type-box-bottom"></view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import { getSpWorkList, saveSpWork, saveSpWorkTime, delSpWorkTime, delSpWork } from "@/api/mine.js"
	export default {
		data() {
			return {
				chooseWeekShow:false,
				workList: [],
				workListLength: 0,
				weekList: [
					{ id: 1, name: '周一', choose: false },
					{ id: 2, name: '周二', choose: false },
					{ id: 3, name: '周三', choose: false },
					{ id: 4, name: '周四', choose: false },
					{ id: 5, name: '周五', choose: false },
					{ id: 6, name: '周六', choose: false },
					{ id: 7, name: '周日', choose: false },
				],
				chooseWeek: [],
				
				chooseTimeShow: false,
				multiSelector: [
					['00:00', '01:00', '02:00','03:00', '04:00','05:00', '06:00', '07:00','08:00', '09:00','10:00', '11:00', '12:00','13:00', '14:00','15:00', '16:00', '17:00','18:00', '19:00','20:00', '21:00', '22:00','23:00' ], 
					['00:00', '01:00', '02:00','03:00', '04:00','05:00', '06:00', '07:00','08:00', '09:00','10:00', '11:00', '12:00','13:00', '14:00','15:00', '16:00', '17:00','18:00', '19:00','20:00', '21:00', '22:00','23:00' ], 
				],
				// selectIndex: [0,1],
				// selectList: ['1:00', '2:00', '3:00','4:00', '5:00'],
				
				editId: ''
			}
		},
		onLoad() {
			this.getWorkList()
		},
		
		methods: {
			getWorkList() {
				getSpWorkList().then(res => {
					this.workList = res.data.data
					this.workListLength = this.workList.length
					// console.log(res.data.data)
				})
			},
			addWork() {
				this.editId = ''
				this.chooseWeek = []
				this.weekList.forEach(item => {
					item.choose = false
				})
				this.chooseWeekShow = true
			},
			toChooseWeek(item){
				this.editId = item.workId
				this.chooseWeek = item.workWeek.split(",")
				this.weekList.forEach(item => {
					item.choose = false
				})
				this.chooseWeek.forEach(item => {
					this.weekList[item-1].choose = true
				})
				this.chooseWeekShow = true
			},
			closeWeek() {
				this.chooseWeekShow = false
			},
			confirmWeek() {
				this.chooseWeekShow = false
				this.saveWeek(this.chooseWeek.join(','))
			},
			saveWeek(week) {
				saveSpWork({
					workWeek: week,
					workId: this.editId
				}).then(res => {
					if(res.data.code == 200) {
						this.getWorkList()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
					
				})
			},
			deleteItem(id) {
				// if(this.workListLength == 1) {
				// 	uni.showToast({
				// 		title:'至少需要保留一组排班哦',
				// 		icon:'none'
				// 	})
				// }
				var that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '确定删除此排班？',
				    success: function (res) {
				        if (res.confirm) {
							delSpWork({
								workId: id
							}).then(res => {
								if(res.data.code == 200) {
									uni.showToast({
										title:'删除成功',
										icon:'none'
									})
									that.getWorkList()
									
								}else {
									uni.showToast({
										title:res.data.msg,
										icon:'none'
									})
								}
							})
							
				           
				        } 
				    }
				})
			},
			toDeleteTimes(items) {
				delSpWorkTime({
					workTimeId: items.workTimeId
				}).then(res => {
					if(res.data.code == 200) {
						this.getWorkList()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			chooseWeekItem(item, index) {
				if(item.choose == false) {
					this.weekList[index].choose = true
				} else {
					this.weekList[index].choose = false
				}
				let list = []
				this.weekList.forEach(item => {
					if(item.choose == true) {
						list.push(item.id)
					}
				})
				this.chooseWeek = list
				
			},
			toChooseTime(item) {
				this.editId = item.workId
				this.chooseTimeShow = true
			},
			confirmTime(e) {
				console.log(e)
				// let startId = e[0]
				// let endId = e[1]
				saveSpWorkTime({
					workId: this.editId,
					startTime: this.multiSelector[0][e[0]],
					endTime: this.multiSelector[1][e[1]]
				}).then(res => {
					if(res.data.code == 200) {
						this.getWorkList()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	@import './my-set.scss';
</style>